<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li><router-link to="/foreign">合作</router-link></li>
        <li><router-link to="/domestic">国内合作</router-link></li>
      </ol>
    </header>
    <div class="domesticContent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="chart">
            <ul>
              <li>
                <a href="#">全国合作医院饼图展示</a>
                <ul>
                  <li>
                    <div class="myEchart">
                      <!--饼状图-->
                      <div
                        class="pieEchart"
                        id="main"
                        style="width:100%;height:500px;"
                      ></div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/foreign"><span>德国合作</span></router-link>
                </li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/domestic">国内合作</router-link></li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/cooperate">合作伙伴</router-link></li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/research">调研交流</router-link></li>
              </ul>
            </div>
            <hr
              style="filter: alpha(opacity=100,finishopacity=0,style=2)"
              width="80%"
              color="#6f5499"
              size="10"
            />
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top:1px solid #ccc;"
                width="100%"
                color="#ccc"
                size="1"
              />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
              <p>
                <img src="../assets/code.jpg" alt="" />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        data() {
            return {
                charts: "",
                opinion: [
                    "北京市",
                    "云南省",
                    "江西省",
                    "广东省",
                    "河北省",
                    "四川省",
                    "海南省",
                    "山西省",
                    "陕西省",
                    "辽宁省"
                ],
                type: "pie",
                opinionData: [{
                    value: 7,
                    name: "北京市"
                }, {
                    value: 5,
                    name: "云南省"
                }, {
                    value: 2,
                    name: "江西省"
                }, {
                    value: 4,
                    name: "广东省"
                }, {
                    value: 2,
                    name: "河北省"
                }, {
                    value: 1,
                    name: "四川省"
                }, {
                    value: 1,
                    name: "海南省"
                }, {
                    value: 2,
                    name: "山西省"
                }, {
                    value: 3,
                    name: "陕西省"
                }, {
                    value: 2,
                    name: "辽宁省"
                }]
            };
        },
        methods: {
            drawPie(id) {
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    backgroundColor: "#fff",
                    color: [
                        "#c13831",
                        "#2f4553",
                        "#61a0a9",
                        "#d7f0e3",
                        "#3297db",
                        "#2f4553",
                        "#75e57c",
                        "#d9d98b",
                        "#e09370",
                        "#ce8520"
                    ],
                    /*饼状图的颜色*/
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}({d}%)"
                            /*饼状图触碰之后显示的注释文字*/
                    },
                    legend: {
                        left: "center",
                        /*标签文字排成一行*/
                        y: "bottom",
                        /*在垂直方向上的底部*/
                        data: this.opinion
                    },
                    series: [{
                        type: "pie", //饼状图
                        center: ["50%", "50%"], //显示位置
                        name: "",
                        type: "pie",
                        radius: ["0%", "60%"],
                        /*空心圆的占比*/
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            },
                            normal: {
                                borderWidth: 5,
                                /*隔开的白色边界*/
                                borderColor: "#fff"
                                    /*border*/
                                    // labelLine :{show:true}
                            }
                        },
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                // position:'inner',
                                textStyle: {
                                    fontWeight: 200,
                                    fontSize: 20 //文字的字体大小
                                }
                                // formatter: '{d}%',/*饼状图内显示百分比*/
                                // data:['40%','60%'],
                            },

                            emphasis: {
                                show: false
                                    /*空心文字出现*/
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: "#000"
                                }
                            }
                        },
                        data: this.opinionData
                    }]
                });
            }
        },
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawPie("main");
            });
        }
    };
</script>
<style>
    .dom .esticContent {
        width: 100%;
    }
    
    .pieEchart {
        width: 12.5 rem;
        margin: 0;
    }
    
    .guideTop ul li a {
        color: #fff;
    }
    .guideTip div {
        white-space: nowrap;
    }
    .guideTip div span {
        word-break: break-all;
    }
</style>